
<template>
  <el-dialog
    title="用户机构配置"
    :visible.sync="show"
    width="600px"
    center
  >
    <div class="content">
      <tree-box
        ref="treeSelector"
        v-model="selectedNode"
        :data="treeData"
        :check-strictly="true"
        show-checkbox
        title="机构树"
        :render-content="renderContent"
        placeholder=""
      />
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="show = false">取 消</el-button>
      <el-button type="primary" @click="saveDoc">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getOrganizationTree, getUserDetail } from '@/api/manage'
import { updateOtherUserOrganization } from '@/api/user'
import TreeBox from '@/components/TreeBox'
export default {
  name: 'EditOrganization',
  components: {
    TreeBox
  },
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    optType: {
      type: String,
      default: 'add'
    },
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      selectedNode: null,
      treeData: []
    }
  },
  computed: {
    show: {
      get() {
        return this.showModal
      },
      set(val) {
        this.$emit('update:showModal', val)
        this.fileList = []
      }
    }
  },
  watch: {
    data: {
      handler(newData, oldData) {
      },
      deep: true,
      immediate: true
    },
    showModal: {
      handler(newData, oldData) {
        // 获取最新用户数据
        getUserDetail({ userId: this.data.id }).then(res => {
          const { data } = res
          this.data.organizationId = data.organizationId
          this.data.organizationIds = data.organizationIds
          /**
         * 1、所属机构Id列表不为空，使用
         * 2、当前机构Id不为空，使用
         */
          let nodes = []
          if (this.data.organizationIds) {
            nodes = this.data.organizationIds.split(',').map(item => { return { id: item } })
          } else if (this.data.organizationId) {
            nodes.push({ id: this.data.organizationId })
          } else {
            return
          }
          const checkNode = []
          nodes.forEach(item => {
            checkNode.push(item)
          })
          this.$nextTick(() => {
            this.$refs.treeSelector.setCheckedNodes(checkNode)
          })
        })
      },
      immediate: true
    }
  },
  mounted() {
    this.getMenus()
  },
  methods: {
    renderContent(h, { node, data, store }) {
      return (
        <span class='custom-tree-node'>
          <span>{node.data.name}</span>
        </span>)
    },
    getMenus() {
      getOrganizationTree().then(res => {
        const { nodes } = res.data || {}
        if (nodes && nodes.length > 0) {
          this.treeData = nodes
        }
      })
    },
    saveDoc() {
      const nodes = this.$refs.treeSelector.getCheckedNodes()

      if (nodes.length === 0) {
        this.$message.error('请选择机构')
        return
      }

      // 获取所属机构Id列表
      let organizationIds = ''
      nodes.forEach(item => {
        organizationIds += item.id + ','
      })
      organizationIds = organizationIds.substring(0, organizationIds.length - 1)

      const organization = nodes[0]
      const userId = this.data.id

      const params = {
        userId: userId,
        organizationIds: organizationIds,
        organizationId: organization.id,
        organizationName: organization.name
      }

      updateOtherUserOrganization(params).then(res => {
        if (res.code === '0001') {
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
          this.show = false
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
  height: 500px;
}
</style>
